<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <link rel="stylesheet" href="../css/bootstrap-table.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script src="../js/bootstrap-table.min.js"></script>
    <script src="../js/bootstrap-table-zh-CN.min.js"></script>
    <style>
        .chang{
            width: 40%;
            display: inline-block;
            text-align:right;
        }
        .dchang{
            width: 50%;
            display: inline-block;
        }
        .aa{
            display: inline-block;
            width: 50%;
        }
        .dropdownbox{
            width: 60%;
        }
        .ichang{
            width: 60%;
        }
    </style>
</head>
<body>
<div class="row">
    <div class="col">
        请选择产品I级分类:
        <select id="one" class="form-control">
            <option value="">请选择</option>
            <option>电子</option>
        </select>
    </div>
    <div class="col">
        请选择产品II级分类:
        <select id="tow" class="form-control">
            <option value="">请选择</option>
            <option>计算机</option>
        </select>
    </div>
    <div class="col">
        请选择产品III级分类:
        <select id="throws" class="form-control">
            <option value="">请选择</option>
            <option >服务器</option>
        </select>
    </div>
    <div class="col">
        <button onclick="f()" class="btn btn-primary" style="margin-top: 21px">查询</button>
    </div>
</div>
<hr/>
<div>
    <table id="tab"></table>
</div>
<script>
    $(function () {
        $("#tab").bootstrapTable({
            //请求方式  get请求中文会乱码，建议使用post请求
            method: 'post',
            //请求头部的设置
            contentType: 'application/json',
            //url
            url: '/design/qeuryall',
            //设置交替行样式
            striped: true,
            //初始显示页号
            pageNumber: 1,
            //是否显示分页
            pagination: true,
            //设置是服务端分页还是客户端分页
            sidePagination: 'server',
            //页大小
            pageSize: 5,
            //分页列表
            pageList: [3, 5, 6, 10],
            //上传到服务端的参数
            queryParams: function (params) {
                return {
                    // 计算页号(当前页)
                    pageNumber: (params.offset / params.limit) + 1,
                    // 计算页大小
                    pageSize: params.limit,
                    querySearch:{
                        firstKindName:$("#one").val(),
                        secondKindName:$("#tow").val(),
                        thirdKindName:$("#throws").val()
                    }

                };
            },
            // 定义列名
            columns: [
                {title: '设计编号', field: 'designId', align: 'center'},
                {title: '产品编号', field: 'productId', align: 'center'},
                {title: '产品名称', field: 'productName', align: 'center'},
                {title: 'I级分类', field: 'firstKindName', align: 'center'},
                {title: 'II级分类', field: 'secondKindName', align: 'center'},
                {title: 'III级分类', field: 'thirdKindName', align: 'center'},
                {title: '审核', field: 'checkTag', align: 'center',
                    formatter: function (value,row,index){
                        if(value=="S001-2"){
                            return "<button class='btn btn-outline-dark' >审核不通过</button>";
                        }else if(value=="S001-1"){
                            return "<button class='btn btn-outline-success' >审核通过</button>"
                        }else {
                            return "<button class='btn btn-outline-warning'>未审核</button>"
                        }
                    }
                }
            ]
        })

    })
    function f() {
        $("#tab").bootstrapTable("refresh");
    }
</script>
</body>
</html>